<template>
  <view :style="colorStyle">
    <navTitle :styleType="'black'" :title="'佣金排行榜'" :noheight="false" />
    <view class="bgmain">
      <image
        src="http://xpj40szpt.signalpha.cn/img/img32.png"
        class="bg"
        mode="widthFix"
      ></image>

      <view class="infobox2">
        <view
          class="block1 c020630 fontWeight"
          v-for="(item, index) in list"
          v-if="index == 1"
          :key="item.id"
        >
          <image :src="item.avatar" class="info1" mode=""></image>
          <image src="@/static/img34.png" class="pai" mode=""></image>
          <view class="info2 f32 ellipsis1">
            {{ item.nickName }}
          </view>
          <view class="info3 f56">
            {{ item.total }}
          </view>
        </view>
        <view
          class="block2 c594807 fontWeight"
          v-for="(item, index) in list"
          v-if="index == 0"
          :key="item.id"
        >
          <image :src="item.avatar" class="info1" mode=""></image>
          <image src="@/static/img35.png" class="pai" mode=""></image>
          <view class="info2 f36 ellipsis1">
            {{ item.nickName }}
          </view>
          <view class="info3 f64">
            {{ item.total }}
          </view>
        </view>
        <view
          class="block3 c2F1702 fontWeight"
          v-for="(item, index) in list"
          v-if="index == 2"
          :key="item.id"
        >
          <image :src="item.avatar" class="info1" mode=""></image>
          <image src="@/static/img36.png" class="pai" mode=""></image>
          <view class="info2 f28 ellipsis1">
            {{ item.nickName }}
          </view>
          <view class="info3 f48">
            {{ item.total }}
          </view>
        </view>
      </view>
    </view>
    <view class="infobox1 flex aitems sa" :style="wexininfobox1Style">
      <view
        class="block1 f32 themeColor"
        v-for="(item, index, key) in tablist"
        :key="item.id"
      >
        <view
          :class="tablistindex == index ? 'info1 info1Active' : 'info1'"
          @click="tablistChange(index)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>

    <!-- 	<view class="" style="height: 0rpx;">

		</view> -->

    <view class="mains">
      <view class="infobox3 flex aitems between">
        <view class="block1 c1F1F1F f32"> 佣金排名 </view>
        <view class="block2 c1F1F1F f32 fontWeight"> 总数：{{ total }} </view>
      </view>

      <!-- <view class="infobox4 flex aitems">
				<image src="@/static/img30.png" class="block1" mode=""></image>
				<input type="text" placeholder="搜索关键词找到心仪好物吧～" class="c1F1F1F f24" placeholder-class="c858585 f24" />
				<view class="block2 cfff f28">
					搜索
				</view>
			</view> -->

      <view class="infobox5">
        <view
          class="list flex aitems between"
          v-for="(item, index, key) in list"
          :key="key"
          v-if="index > 2"
        >
          <view class="left flex aitems">
            <view class="block1 f48 fontWeight c1F1F1F">
              {{ index + 1 }}
            </view>
            <image :src="item.avatar" class="block2" mode=""></image>
            <view class="block3 c1F1F1F f28">
              {{ item.nickName }}
            </view>
          </view>
          <view class="right c1F1F1F f32 fontWeight">
            {{ item.total }}
          </view>
        </view>
      </view>

      <nodata v-if="list.length < 3" />
      <view v-if="list.length < 3" class="" style="height: 100rpx"> </view>
    </view>

    <view class="" style="height: 200rpx"> </view>

    <view class="infobox5 infobox6" v-if="myInfo.avatar">
      <view class="list flex aitems between">
        <view class="left flex aitems">
          <view class="block1 f48 fontWeight c1F1F1F">
            {{ myInfo.index || "" }}
          </view>
          <image :src="myInfo.avatar" class="block2" mode=""></image>
          <view class="block3 c1F1F1F f28">
            {{ myInfo.nickName || "" }}
          </view>
        </view>
        <view class="right c1F1F1F f32 fontWeight">
          {{ myInfo.total || 0 }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { placeOrderRankList } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken } from "../../utils/storage";
import {
  getStartOfMonth,
  getEndOfMonth,
  getThisWeekDates,
  getYesterdayDate,
  formatDate,
} from "@/utils/util.js";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      tablist: [
        {
          name: "本月",
        },
        {
          name: "本周",
        },
        {
          name: "昨日",
        },
      ],
      tablistindex: 0,
      createTimeBegin: getStartOfMonth().dateValue + " 00:00:00",
      createTimeEnd: getEndOfMonth().dateValue + " 23:59:59",
      list: [],
      total: 0,
      options: {},
      myInfo: {},
      wexininfobox1Style: "",
      myInfo: {},
    };
  },
  async onLoad(options) {
    this.options = options;

    // #ifdef MP-WEIXIN
    let menuInfo = getApp().globalData.menuInfo;
    this.wexininfobox1Style = `top:${menuInfo.top + menuInfo.height + 15}px;`;
    // #endif

    if (getToken()) {
      this.placeOrderRankList();
    }
  },
  methods: {
    async placeOrderRankList() {
      loading();
      let { data } = await placeOrderRankList({
        createTimeBegin: this.createTimeBegin,
        createTimeEnd: this.createTimeEnd,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        let total = 0;
        list.map((item, index) => {
          total += item.total;
          if (item.id == this.options.id) {
            item.index = index + 1;
            this.myInfo = item;
          }
        });
        this.total = Number(total).toFixed(2);
        this.list = list;
      }
      uni.hideLoading();
    },
    tablistChange(index) {
      this.tablistindex = index;
      if (this.tablistindex == 0) {
        this.createTimeBegin = getStartOfMonth().dateValue + " 00:00:00";
        this.createTimeEnd = getEndOfMonth().dateValue + " 23:59:59";
      }
      if (this.tablistindex == 1) {
        this.createTimeBegin =
          getThisWeekDates().startDate.dateValue + " 00:00:00";
        this.createTimeEnd = getThisWeekDates().endDate.dateValue + " 23:59:59";
      }
      if (this.tablistindex == 2) {
        this.createTimeBegin = getYesterdayDate().dateValue + " 00:00:00";
        this.createTimeEnd = formatDate(Date.now()).dateValue + " 23:59:59";
      }
      this.placeOrderRankList();
      console.log(this.createTimeBegin);
      console.log(this.createTimeEnd);
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bgmain {
  // position: absolute;
  width: 100%;
  top: 0;

  .bg {
    width: 100%;
    // position: absolute;
  }

  .infobox2 {
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 100%;
    top: 0;
    // height: 530rpx;

    .block1 {
      position: absolute;
      left: 55rpx;
      top: 450rpx;
      width: 200rpx;

      .info1 {
        width: 126rpx;
        height: 126rpx;
        border-radius: 130rpx;
        border: 4rpx solid #b5bbe7;
        margin: auto;
      }

      .pai {
        position: absolute;
        width: 71rpx;
        height: 71rpx;
        z-index: 1;
        top: 60rpx;
        right: 30rpx;
      }

      .info2 {
        margin-top: 36rpx;
      }

      .info3 {
      }
    }

    .block2 {
      position: absolute;
      left: 270rpx;
      top: 390rpx;
      width: 210rpx;

      .info1 {
        width: 154rpx;
        height: 154rpx;
        border-radius: 158rpx;
        border: 4px solid #efd15e;
        margin: auto;
      }

      .pai {
        position: absolute;
        width: 71rpx;
        height: 71rpx;
        z-index: 1;
        top: 90rpx;
        right: 30rpx;
      }

      .info2 {
        margin-top: 36rpx;
      }

      .info3 {
      }
    }

    .block3 {
      position: absolute;
      left: 500rpx;
      top: 480rpx;
      width: 200rpx;

      .info1 {
        width: 126rpx;
        height: 126rpx;
        border-radius: 130rpx;
        border: 4rpx solid #deab7f;
        margin: auto;
      }

      .pai {
        position: absolute;
        width: 71rpx;
        height: 71rpx;
        z-index: 1;
        top: 60rpx;
        right: 34rpx;
      }

      .info2 {
        margin-top: 36rpx;
      }

      .info3 {
      }
    }
  }
}

.infobox1 {
  width: 520rpx;
  height: 88rpx;
  position: absolute;
  z-index: 1;
  border-radius: 55rpx;
  background: #fff;
  /* #ifdef H5 */
  top: 160rpx;
  /* #endif */
  left: 50%;
  margin-left: -260rpx;

  .block1 {
    width: 168rpx;

    .info1 {
      width: 168rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      background: #fff;
      border-radius: 40rpx;
    }

    .info1Active {
      color: #fff;
      background: var(--view-theme);
    }
  }
}

.mains {
  position: relative;
  z-index: 1;
  /* #ifdef H5 */
  // margin: 540rpx 0 0;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  // margin: 490rpx 0 0;
  /* #endif */
  background: #fff;
  border-radius: 32rpx 32rpx 0px 0px;
  padding: 40rpx 30rpx 0;
  top: -80rpx;
}

.infobox3 {
  position: relative;
  z-index: 1;

  // margin: 50rpx 30rpx 0;

  .block1 {
  }

  .block2 {
  }
}

.infobox4 {
  border-radius: 36rpx;
  background: #f5f5f5;
  position: relative;
  height: 72rpx;
  overflow: hidden;
  padding: 0 40rpx;
  margin: 40rpx 0 0;

  .block1 {
    width: 40rpx;
    height: 40rpx;
  }

  input {
    width: calc(100% - 12rpx - 40rpx - 112rpx);
    margin-left: 12rpx;
  }

  .block2 {
    position: absolute;
    right: 4rpx;
    height: 64rpx;
    line-height: 64rpx;
    width: 112rpx;
    text-align: center;
    background: var(--view-theme);
    top: 4rpx;
    border-radius: 36rpx;
  }
}

.infobox5 {
  .list {
    border-bottom: 1px solid #f5f5f5;
    padding: 32rpx 0;

    .left {
      .block1 {
        min-width: 50rpx;
      }

      .block2 {
        margin-left: 24rpx;
        width: 72rpx;
        height: 72rpx;
        border-radius: 72rpx;
      }

      .block3 {
        margin-left: 24rpx;
      }
    }

    .right {
    }
  }
}

.infobox6 {
  position: fixed;
  z-index: 99;
  bottom: 0;
  width: calc(100% - 60rpx);
  padding: 0 30rpx;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
